<template>
  <div class="x-dialog">
    <div v-transfer-dom>
      <x-dialog v-model="showDialog" class="dialog-demo" :hide-on-blur="true">
        <p class="dialog-title" style="font-size:18px;margin-bottom:20px">{{dialogTitle}}</p>
        <div class="img-box" :style="{maxHeight: 150 + 'px'}" style="padding:10px 20px; overflow-y:scroll; -webkit-overflow-scrolling:touch; text-align:left;">
          <slot></slot>
        </div>
        <div @click="toHidden" class="toHidden">
          <x-icon type="ios-close" size="30"></x-icon>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { TransferDomDirective as TransferDom, XDialog } from 'vux'

export default {
  props: ['showDialog', 'dialogTitle'],
  directives: {
    TransferDom
  },
  components: {
    XDialog
  },
  data () {
    return {
    }
  },
  created () {
    this.contentHeight = window.innerHeight * 62 / 100
  },
  methods: {
    toHidden () {
      this.$emit('hidden')
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
  .x-dialog{
    width 300px
    .dialog-demo {
      .dialog-title {
        line-height 50px
        color #666
      }
      .img-box {
        height 350px
        overflow hidden
        line-height 20px
      }
      .vux-close {
        margin-top 8px
        margin-bottom 8px
      }
    }
  }
  .toHidden{
    padding-top 10px
  }
</style>
